$(function () {
  //  初始化图表一：
  // 1-初始化echarts实例， 指定图表的父容器
  var myChart = echarts.init(document.getElementById('c1'));

  // 2-指定图片的所需的数据 和 相关设置 
  var option = {
    // 标题
    title: {
      text: '2020年注册人数'
    },
    // 提示工具
    tooltip: {},
    // 图例
    legend: {
      data: ['销量', '注册人数']
    },
    // x轴
    xAxis: {
      data: ["1月", "2月", "3月", "4月", "5月", "6月"]
    },
    // y轴： 刻度会根据数据自动生成 
    yAxis: {},
    // 系列： 
    series: [
      {
        name: '销量', // 数据名称 
        type: 'bar',  // 图表类型 bar  柱图  line 线图 pie  饼图 
        data: [15, 120, 36, 10, 10, 20]
      },
      {
        name: '注册人数', // 数据名称 
        type: 'line',  // 图表类型 bar  柱图  line 线图 pie  饼图 
        data: [40, 50, 26, 40, 110, 20]
      }
    ]
  };

  // 3-将数据传递给echart的实例进行绘制 
  myChart.setOption(option);


  //  初始化图表三：
  // 1-初始化echarts实例， 指定图表的父容器
  var myChart2 = echarts.init(document.getElementById('c2'));

  // 2-指定图片的所需的数据 和 相关设置 
  var option2 = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 20,
      data: ['耐克', '阿迪达斯', '匡威', '老北京布鞋', '回力']
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['60%', '70%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: '30',
              fontWeight: 'bold'
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [
          { value: 335, name: '耐克' },
          { value: 310, name: '阿迪达斯' },
          { value: 234, name: '匡威' },
          { value: 135, name: '老北京布鞋' },
          { value: 1548, name: '回力' }
        ]
      }
    ]
  };



  // 3-将数据传递给echart的实例进行绘制 
  myChart2.setOption(option2);
})